<template>
  <a-table
    :columns="columns"
    :scroll="{x: 'max-content'}"
    :dataSource="data"
    style="background: #fff;"
  >
  <template slot="source" slot-scope="text, record">
      <span>{{ record.source === 1 ? 'pc' : record.source === 2 ? 'h5' : $t('all.autotext1932') }}</span>
    </template>
  <template slot="cancelTime" slot-scope="text, record">
      <span>{{ record.cancelTime | moment() }}</span>
    </template>
    <template  slot="confirmTime" slot-scope="text, record">
      <span v-if="record.confirmTime">{{  record.confirmTime | moment() }}</span>
      <span v-else>-</span>
    </template>

  

    <template slot="name" slot-scope="text, record">
      <span>{{ record.ptsName }} {{ record.ptsPhone ? `/${record.ptsPhone}` : "" }}</span>
    </template>

    <!-- 自定义渲染列 "受托人姓名/手机号" -->
    <template slot="guardianName" slot-scope="text, record">
      <span>{{ record.guardianName }} {{ record.guardianPhone ? `/${record.guardianPhone}` : "" }}</span>
    </template>

    <!-- 操作列 -->
    <template v-if="record.unsubscribeStatus == 2 && $auth('PROJECT.PROJECT_PATIENT_DELETE_CONFIRM')" slot="operation"
              slot-scope="text, record"
    >
      <a @click="() => deleteRow(record)">{{$t('all.autotext1934')}}</a>
      <a style="margin-left: 15px;" @click="() => handleDownloadZipPack(record)">{{$t('all.autotext1935')}}</a>
    </template>
  </a-table>
</template>

<script>
import { ptsZipPackAndRemove, getCancelList, getPtsZipPack } from '@/api/overview/subject'
import { exportZipcom } from '@/utils/util'

export default {
  data () {
    return {
      columns: [
      {
          title: this.$t('all.autotext1931'),
          dataIndex: 'source',
          key: 'source',
          scopedSlots: { customRender: 'source' }
        },
        {
          title: this.$t('all.autotext1921'),
          dataIndex: 'cancelTime',
          key: 'cancelTime',
          scopedSlots: { customRender: 'cancelTime' }
        },
        {
          title: this.$t('all.autotext1922'),
          dataIndex: 'confirmTime',
          key: 'confirmTime',
          scopedSlots: { customRender: 'confirmTime' }
        },
        {
          title: this.$t('all.autotext1923'),
          dataIndex: 'ptsName',
          key: 'ptsName'
        },
        {
          title: this.$t('all.autotext1924'),
          dataIndex: 'researchName',
          key: 'researchName'
        },
        {
          title: this.$t('all.autotext1925'),
          dataIndex: 'ptsNo',
          key: 'ptsNo'
        },
        {
          title: this.$t('all.autotext1926'),
          dataIndex: 'name',
          key: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: this.$t('all.autotext1927'),
          dataIndex: 'guardianName',
          key: 'guardianName',
          scopedSlots: { customRender: 'guardianName' }
        },
        {
          title: this.$t('all.autotext1928'),
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],
      proId: this.$store.getters.project.id
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () {
      try {
        const response = await getCancelList({ proId: this.proId })
        this.data = response
      } catch (err) {
        console.log('err', err)
      }
    },
    handleDownloadZipPack (record) {
      getPtsZipPack({ id: record.id }).then((res) => {
        exportZipcom(`${record.no}_${record.ptsNo}_受试者信息`, res.data)
      })
    },
    async delete (record) {
      try {
        const res = await ptsZipPackAndRemove({ id: record.id })
        exportZipcom(`${record.no}_${record.ptsNo}_受试者信息`, res.data)
        setTimeout(() => {
          this.getList()
        }, 2000)
      } catch (err) {
        console.log('err', err)
      }
    },
    async deleteRow (record) {
      return this.$confirm({
        title: '确认删除',
        content: h => <div>
          <h4>确认删除受试者信息，将彻底从系统中移除并无法找回，请确保受试者个人信息已下载本地留存</h4>
          <p style="font-size: 12px;">声明：操作确认删除后，璞睿生命科技将不承担任何后果，将由操作者个人承担，请谨慎删除。</p>
        </div>,
        okText: '下载参与者信息包并确定删除',
        onOk: () => {
          this.delete(record)
        }
      })
    }
  }
}
</script>

<style></style>
